//src/router/index.js就是当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import myHome from "@/components/myHome";
import myMovie from "@/components/myMovie";
import myAbout from "@/components/myAbout";
import myTab1 from "@/components/tabs/myTab1"
import myTab2 from "@/components/tabs/myTab2";

// 把VueRouter安装为Vue 项目的插件
//Vue.use()函数的作用，就是来安装插件的
Vue.use(VueRouter)

//创建路由的实例对象
const router = new VueRouter({
    //routers是一个数组，作用：定义“hash地址”与“组件”之间的联系
    routes:[
        // 路由规则
        { path:'/',redirect:'/about' },
        { path:'/home', component: myHome },
        // 需求：在Movie组件中，希望根据id的值，展示对应电影的详情信息
        //可以为路由规则开启props传参，从而方便的拿到动态参数的值
        { path:'/movie/:id',component: myMovie,props: true },
        {
            path:'/about',
            component: myAbout,
            // redirect:'./about/tab1',
            children:[
                // 子路由规则
                // 默认子路由：如果children 数组中，某个路由规则的path值为空字符串，则这条路由规则，叫做“默认子路由”
                { path: '',component:myTab1 },
                { path: 'tab2',component:myTab2 }
            ]
        }
    ]
})

export default router
